<template>
	<div class="mySpinner" v-show="isLoading">
        <img src="~__assets/images/loading.png" alt="" v-show="!allLoaded">
        <span class="jiazai" v-show="!allLoaded">加载中...</span>
        <span class="jiazai" v-show="allLoaded">已全部加载</span>
    </div>
</template>

<style scoped lang="scss">
	.mySpinner{
        width:100%;
        float: left;
        display: block;
		text-align:center;
		height:40px;
		line-height:40px;
        vertical-align:1px;
        img{
            display: inline-block;
            width:24px;
            height:24px;
            
            -webkit-animation: load 1s infinite ease-in-out;
            animation: load 1s infinite ease-in-out;
        }

        @keyframes load{
            100% {
                transform:rotate(360deg);
            }
        }
        @-webkit-keyframes load{
            100% {
                -webkit-transform: rotate(360deg) 
            }
        }
        .jiazai{
            margin-left: 5px;
        }
	}
</style>

<script>
	export default{
		name:'my-spinner',
        props:['allLoaded','isLoading'],
	}

</script>